/*
Button
*/

:host {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-left: var(--an-padding-default);
    padding-right: var(--an-padding-default);
    height: var(--an-height-default);
    border: var(--an-border-default);
    border-radius: var(--an-border-radius-default);
    font-size: var(--an-font-size-default);
    color: var(--an-color-text-primary);
    background-color: transparent;
    cursor: pointer;
    // @FIXME: filter 加动画有点膈应
    // transition: filter .2s;
}

/* 颜色 */
// :host([type="default"]) {}
:host([type="primary"]) {
    color: var(--an-color-white);
    background-color: var(--an-color-primary);
    border-color: var(--an-color-primary);
}

:host([type="success"]) {
    color: var(--an-color-white);
    background-color: var(--an-color-success);
    border-color: var(--an-color-success);
}

:host([type="warning"]) {
    color: var(--an-color-white);
    background-color: var(--an-color-warning);
    border-color: var(--an-color-warning);
}

:host([type="danger"]) {
    color: var(--an-color-white);
    background-color: var(--an-color-danger);
    border-color: var(--an-color-danger);
}

/* 大小 */
// :host([size="default"]) {}

:host([size="small"]) {
    padding-left: var(--an-padding-small);
    padding-right: var(--an-padding-small);
    height: var(--an-height-small);
    font-size: var(--an-font-size-small);
    border-radius: var(--an-border-radius-small);
}

:host([size="large"]) {
    padding-left: var(--an-padding-large);
    padding-right: var(--an-padding-large);
    height: var(--an-height-large);
    font-size: var(--an-font-size-large);
    border-radius: var(--an-border-radius-large);
}

:host([round]) {
    border-radius: calc(var(--an-height-default) / 2);
}

:host([round][size="small"]) {
    border-radius: calc(var(--an-height-small) / 2);
}

:host([round][size="large"]) {
    border-radius: calc(var(--an-height-large) / 2);
}

:host([block]) {
    width: 100%;
    justify-content: center;
}

:host([disabled]) {
    pointer-events: none;
    opacity: .7;
}

:host([loading]) {
    pointer-events: none;
}

:host([type]:hover) {
    filter: brightness(1.2)
}

:host(:not([type]):hover) {
    color: var(--an-color-primary);
    border-color: var(--an-color-primary);
}

an-icon-loading {
    margin-right: 5px;
    font-size: 1.2em;
}